<template>
  <div>
    <div class="logo" id="logo">
      <img style="width: 100%;height: 100%;" src="~@/assets/img/logo.png" class="center" alt="">
    </div>

    <el-card shadow="never" class="container" id="channel">
      <div class="notice" v-html="notice.content"></div>
      <div class="search-box">
        <el-form :inline="true" :model="dataForm">
          <el-form-item>
            <el-input v-model="dataForm.type" placeholder="请输入类型" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="dataForm.name" placeholder="请输入名称" clearable></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="queryMessages()">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-for="(item) in dataArr" :key="item.type">
        <div class="panel-title">{{item.type}}</div>
        <el-table :data="item.data" border style="width: 100%;">
          <!--
          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
          -->
          <el-table-column prop="name" label="名称" header-align="center" align="center"></el-table-column>
          <el-table-column prop="quotedPrice" label="报价" header-align="center" align="center"></el-table-column>
          <el-table-column prop="acceptTime" label="受理需时" header-align="center" align="center"></el-table-column>
          <el-table-column prop="completeCycle" label="完成周期" header-align="center" align="center"></el-table-column>
          <el-table-column prop="validPeriod" label="有效期" header-align="center" align="center"></el-table-column>

          <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="350">
            <template slot-scope="scope">
              <el-tooltip placement="top">
                <div slot="content">基数<br />{{scope.row.basePrice}}</div>
                <el-button size="small">查看基数</el-button>
              </el-tooltip>
              <el-tooltip placement="top">
                <div slot="content">材料<br />{{scope.row.material}}</div>
                <el-button size="small">查看材料</el-button>
              </el-tooltip>
              <el-tooltip placement="top">
                <div slot="content">备注<br />{{scope.row.remark}}</div>
                <el-button size="small">查看备注</el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <div class="footer">
      <a class="gotop" href="#logo">回到顶部</a>
      <!--
      <div class="gotop" v-show="gotop" @click="toTop">回到顶部</div>
      -->
    </div>
  </div>

</template>

<script>
import Watermark from "@/utils/watermark";
export default {
  data() {
    return {
      gotop: false,
      dataForm: {
        type: "",
        name: ""
      },
      notice:{
        title:"",
        content:""
      },
      dataArr: [
      ]
    };
  },
  methods: {
    //禁止右键
    preventContextmenu() {
      let node = document.getElementById("channel");
      node.oncontextmenu = function() {
        return false;
      };
      node.onselectstart = function() {
        return false;
      };
    },
    view() {
      console.log(1);
    },
    queryNotice() {
      this.$http.get("/business/notice/latest")
              .then(({ data: res }) => {
                if (res.code == 0) {
                  this.notice = res.data;
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch(() => {});
    },
    queryMessages() {
      this.$http
        .get("/business/message/list", {
          params: {
            ...this.dataForm
          }
        })
        .then(({ data: res }) => {
          if (res.code == 0) {
            this.dataArr=res.data;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(() => {});
    },
    queryUser() {
      this.$http
        .get("/api/mail/detail")
        .then(({ data: res }) => {
          if (res.code == 0) {
            let markText = "";
            let username = res.data.username;
            if(username){
              markText += username;
            }
            let date = res.data.date;
            if(date){
              markText += date;
            }

            Watermark.set("channel", markText);

            //查询列表
            this.queryMessages();

          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(() => {});
    },
    handleScroll() {
      let scrolltop =
        document.documentElement.scrollTop || document.body.scrollTop;
      scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 150;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 5);
    }
  },

  mounted: function() {

    this.queryNotice()
    this.queryUser()

    // 此处true需要加上，不加滚动事件可能绑定不成功
    window.addEventListener("scroll", this.handleScroll, true);

    // 禁用右键
    this.preventContextmenu();


  }
};
</script>
<style>
/* #channel {
  -webkit-touch-callout: none; //系统默认菜单被禁用
  -webkit-user-select: none; //webkit浏览器
  -khtml-user-select: none; //早期浏览器
  -moz-user-select: none; //火狐
  -ms-user-select: none; //IE10
  user-select: none;
} */
.container {
  margin: 50px 100px;
  overflow: visible;
}
.panel-title {
  color: #385690;
  font-weight: 900;
  font-size: 26px;
  margin: 20px 0 10px 0;
}

.logo {
  margin: 0 100px -80px 100px;
  width: 240px;
  height: 160px;
  position: relative;
}
.search-box{
  margin-top: 30px;
}
.notice {
  display: inline-block;
  float: right;
  border: 1px solid rgb(221, 221, 221);
  background-color:#ffffff;
  padding: 10px ;
  border-radius: 2px;
  height: 100px;
  width: 535px;
  overflow:auto;
}
.footer .gotop {
  border: 1px solid rgb(221, 221, 221);
  width: 50px;
  text-align: center;
  position: fixed;
  right: 50px;
  bottom: 30px;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  background: white;
  color: #000000;
  text-decoration:none
}
</style>

